<template>
  <div class="box">
    <div class="top">
      <div class="top-left">
        <router-link to="/"><img src="../assets/img/logo.png" /></router-link>
        <ul>
          <router-link to="/index">
            <li>官网首页</li>
          </router-link>
          <router-link to="/binding">
            <li>绑定查询</li>
          </router-link>
          <router-link to="/sub">
            <li class="out">国服预约</li>
          </router-link>
          <router-view />
          <router-link to="/veteran"><li class="out">老兵绑定</li></router-link>
          <router-link to="/com"><li>社区APP</li></router-link>
          <router-link to="internet"><li>网吧认证</li></router-link>
          <li>欢迎您,1721714495,[注销]</li>
        </ul>
      </div>
      <div class="top-right">
        <router-link to="/index"><button>进入官网</button></router-link>
      </div>
    </div>
    <div class="bj">
      <a class="btn-one"></a>
      <a class="btn-two"></a>
    </div>
    <div class="number">
      <div class="yuyue">13132560</div>
      <div class="progress-bar">
        <div class="jindu">
          <div class="lanjie">&nbsp;</div>
        </div>
      </div>
      <div class="main">
        <div class="config-txt">建议您提前进行硬件检测,看看自己的电脑是否能流畅运行游戏</div>
        <div class="container">
          <Tabs :animated="false">
            <TabPane label="硬件检测">
              <div class="wegame">
                <img src="https://game.gtimg.cn/images/pubg/cp/a20171127apply/wegame_bg.png" />
                <p>方法一:<a class="btn1">一键启动检测</a></p>
                <p>方法二:<a class="btn2">手动启动检测</a></p>
                <p>如果你还未安装WeGame,<a class="on">点击立即下载</a></p>
              </div>
              <div class="guanjia">
                <img src="https://game.gtimg.cn/images/pubg/cp/a20171127apply/guanjia_bg.png" />
                <p><a class="btn1">
                    一键下载检测器
                    <p>(6M小程序无需安装)</p>
                  </a></p>
                <p><a class="btn2">手动启动检测</a></p>
                <p>如果你还未安装腾讯电脑管家,<a class="on">点击立即下载</a></p>
              </div>
            </TabPane>
            <TabPane label="配置表">
              <div class="allocation-box">
              <div class="allocation-one">
                <h1>最低配置</h1>
                <h4>(最低能运行的配置，可能会卡顿建议设置较低画质)</h4>
                <div class="one"><span>系统：</span>Windwons7/Windowns10 64位</div>
                <div class="one"><span>内存：</span>6GB</div>
                <div class="one"><span>CPU：</span>Intel i3-4340/AMD FX-6300</div>
                <div class="one"><span>显卡：</span>GTX 660 HD 7850</div>
                <div class="one"><span>硬盘：</span>7200转机械硬盘</div>
              </div>
              <img src="https://game.gtimg.cn/images/pubg/cp/a20171127apply/config_tab_line2.png" />
              <div class="allocation-one">
                <h1>普通配置</h1>
                <h4>(建议设置中等画质，体验流畅画面)</h4>
                <div class="one"><span>系统：</span>Windwons7/Windowns10 64位</div>
                <div class="one"><span>内存</span>8GB</div>
                <div class="one"><span>CPU</span>Intel i5-6400/AMD R3-1300X</div>
                <div class="one"><span>显卡</span>GTX 1050 / GTX 960 / GTX 1050Ti / RX570</div>
                <div class="three"><span>硬盘：</span>7200转机械硬盘</div>
              </div>
              <img src="https://game.gtimg.cn/images/pubg/cp/a20171127apply/config_tab_line2.png" />
              <div class="allocation-one">
                <h1>推荐配置</h1>
                <h4>(建议设置超高画质,感受身临其境)</h4>
                <div class="one"><span>系统</span>Windwons7/Windowns10 64位</div>
                <div class="one"><span>内存</span>16GB</div>
                <div class="one"><span>CPU</span>Intel i5-7600k/AMD R5-1500X</div>
                <div class="one"><span>显卡</span>GTX 1060 <a style="color: red;">(荐)</a>/ GTX 970 / RX580</div>
                <div class="one"><span>硬盘</span>7200转机械硬盘</div>
              </div>
              <img src="https://game.gtimg.cn/images/pubg/cp/a20171127apply/config_tab_line2.png" />
              <div class="allocation-one">
                <h1>顶级配置</h1>
                <h4>(建议设置超高画质,感受身临其境)</h4>
                <div class="one"><span>系统：</span>Windwons7/Windowns10 64位</div>
                <div class="one"><span>内存</span>16GB及以上</div>
                <div class="one"><span>CPU</span>Intel i7-7700k/AMD R7-1800X</div>
                <div class="one"><span>显卡</span>GTX 1070/GTX 1070Ti/GTX 1080/GTX 1080Ti/RX Vega64/RX Vega56</div>
                <div class="two"><span>硬盘</span>SSD(固态硬盘)</div>
              </div>
              </div>
            </TabPane>
          </Tabs>
        </div>
      </div>
      <div class="mass">
        <div class="mass-person">
          已集结人数<br>
          <span>1</span>
          </div>
          <div class="car-news">
            <ul>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </ul>
          </div>
          <div class="invite"></div>
      </div>
      <div class="activity">
        <ul>
          <li><div class="f1">1</div><div class="gx-txt">未来国服内测时，所有官网预约玩家，均可获得国服绝版定制纪念T恤，每个账号限领一件；</div></li>
          <li><div class="f1">2</div><div class="gx-txt">未来国服内测时，邀请满3位好友的玩家可获得好友礼包，每个账号限领一份；</div></li>
          <li><div class="f1">3</div><div class="gx-txt">礼包将在玩家内测创建角色后48小时内直接发放到仓库；</div></li>
          <li><div class="f1">4</div><div class="gx-txt">所有奖励道具都无法交易；</div></li>
        </ul>
      </div>
    </div>
    <div class="gfooter">
      <div class="gfooter-left">
        <img class="leftone" src="https://game.gtimg.cn/images/js/2018foot/logo/foot-dark.png" >
        <img class="lefttwo" src="../assets/img/nav_spr.png" />
      </div>
      <div class="gfooter-right">
        <ul>
          <li><a>腾讯互动娱乐</a><span>|</span><a> 服务条款 </a><span>|</span><a>隐私保护指引</a>  
          <span>|</span><a> 儿童保护指引</a> <span>|</span> <a>腾讯游戏招聘 </a>
          <span>|</span><a> 腾讯游戏客服</a> <span>|</span><a>游戏列表 </a> <span>|</span><a>广告服务及商务合作</a> </li>
          <li><a>腾讯公司版权所有</a></li>
          <li><a>CORPYRIGHT</a><a> © 1998 - 2021 TENCENT. ALL RIGHTS RESERVED.</a></li>
          <li><a>©PUBG Corporation. All rights reserved.</a></li>
          <li>
            <img src="https://game.gtimg.cn/images/js/2018foot/logo/gswj.png" />
          <a>工商网监电子标识 |粤网文[2020]3396-195号|（署）网出证（粤）字第054号</a>
          </li>
        </ul>
      </div>
    </div>
    <BackTop :height="100" :bottom="200">
            <div class="return"></div>
        </BackTop>
  </div>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    components: {

    },
    methods: {

    }
  }
</script>

<style scoped="scoped" lang="scss">
  * {
    margin: 0;
    padding: 0;
  }

  .box {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative;

    .top {
      width: 100%;
      height: 90px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      background: #000;

      .top-left {
        width: 1000px;
        height: 90px;
        position: relative;
        margin-left: 330px;

        img {
          width: 142px;
          height: 69px;
          position: absolute;
          margin-top: 15px;
        }

        ul,
        li {
          font-size: 14px;
          color: #ccc;
          list-style: none;
          margin: 20px;
          text-align: center;
          font-weight: bold;

          &:hover {
            cursor: pointer;
            color: #e69800;
            transition: color .5s;
          }

          .out {
            color: #e69800;
          }
        }

        ul {
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }
      }

      .top-right {
        width: 200px;
        height: 90px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 380px;
        margin-top: -30px;
        button {
          width: 142px;
          height: 40px;
          font-size: 14px;
          font-weight: bold;
          background: #e69800;
          color: #fff;
          border: none;
          position: absolute;
        }
      }
    }

    .bj {
      width: 100%;
      height: 926px;
      background: url(https://game.gtimg.cn/images/pubg/cp/a20171127apply/xbyy_bg1.jpg) no-repeat;
      position: relative;
      .btn-one {
        width: 400px;
        height: 110px;
        background: url(https://game.gtimg.cn/images/pubg/cp/a20171127apply/but06.png) no-repeat;
        position: absolute;
        margin-top: 750px;
        margin-left: 680px;
      }

      .btn-two {
        width: 400px;
        height: 110px;
        background: url(https://game.gtimg.cn/images/pubg/cp/a20171127apply/laobinglink.png) no-repeat;
        position: absolute;
        margin-top: 750px;
        margin-left: 1180px;
      }
    }

    .number {
      width: 100%;
      height: 3600px;
      background: url(https://game.gtimg.cn/images/pubg/cp/a20171127apply/xbyy_bg2_2.jpg) no-repeat;
      position: relative;

      .yuyue {
        width: 1200px;
        height: 439.6px;
        font-size: 150px;
        color: #e69800;
        font-weight: bold;
        text-align: center;
        line-height: 450px;
        position: absolute;
        margin-left: 450px;
        margin-top: 200px;
      }

      .progress-bar {
        width: 1800px;
        height: 108px;
        margin-left: 200px;
        margin-top: 680px;
        position: absolute;

        .jindu {
          width: 1400px;
          height: 108px;
          background: url(https://game.gtimg.cn/images/pubg/cp/a20171127apply/p3_jd2.png) no-repeat;
          position: relative;

          .lanjie {
            width: 39px;
            height: 111px;
            background: url(https://game.gtimg.cn/images/pubg/cp/a20171127apply/light.png) no-repeat;
            margin-left: 1380px;
            margin-top: -25px;
            position: absolute;
          }
        }
      }

      .main {
        width: 100%;
        height: 1050px;
        background: url(https://game.gtimg.cn/images/pubg/cp/a20171127apply/xbyy_bg3.jpg) no-repeat;
        position: absolute;
        margin-top: 960px;

        .config-txt {
          width: 1200px;
          height: 20px;
          font-size: 16px;
          color: #2f2f2f;
          margin-top: 280px;
          margin-left: 890px;
        }

        .container {
          width: 1320px;
          height: 400px;
          // border: 1px solid red;
          margin-left: 395px;
          margin-top: 50px;
          position: relative;
          .wegame {
            width: 583px;
            height: 307px;
            border-right: 1px dashed;
            text-align: center;
            margin-left: 180px;
            img {
              width: 264px;
              height: 59px;
            }
            p {
              width: 376px;
              height: 63px;
              font-size: 16px;
              color: #fff;
              margin-left: 160px;
              margin-top: 10px;
              text-align: start;
              line-height: 70px;

              .btn1 {
                width: 170px;
                height: 36px;
                font-size: 16px;
                color: #121212;
                background: #e69800;
                display: inline-block;
                line-height: 40px;
                margin-left: 20px;
                text-align: center;
              }

              .btn2 {
                width: 170px;
                height: 36px;
                font-size: 16px;
                color: #121212;
                background: #e69800;
                display: inline-block;
                line-height: 40px;
                margin-left: 20px;
                text-align: center;
              }

              .on {
                color: #e69800;
                text-decoration: underline;
              }
            }
          }
          .guanjia {
            width: 507px;
            height: 307px;
            margin-left: 870px;
            margin-top: -300px;

            img {
              width: 231px;
              height: 57px;
              display: block;
              margin-left: 60px;
            }

            p {
              width: 376px;
              height: 63px;
              font-size: 16px;
              color: #fff;
              margin-left: 60px;
              margin-top: 10px;
              text-align: start;
              line-height: 70px;
              .btn1 {
                width: 170px;
                height: 36px;
                font-size: 16px;
                color: #121212;
                background: #e69800;
                display: inline-block;
                line-height: 35px;
                margin-left: 20px;
                margin-top: 10px;
                text-align: center;
                p{
                  width: 170px;
                  height: 18px;
                  font-size: 12px;
                  color: #121212;
                  margin-top: -40px;
                  margin-left: 30px;
                }
              }

              .btn2 {
                width: 170px;
                height: 36px;
                font-size: 16px;
                color: #121212;
                background: #e69800;
                display: inline-block;
                line-height: 40px;
                margin-left: 20px;
                text-align: center;
              }

              .on {
                color: #e69800;
                text-decoration: underline;
              }
            }
          }
          .allocation-box{
           width: 1400px;
           height: 300px;
           display: flex;
           justify-content: flex-start;
           align-items: center;
           padding: 15px;
           img{
             margin-left: 10px;
           }
            .allocation-one{
              width: 250px;
              height: 276px;
              // border: 1px solid red;
              margin-left: 60px;
              margin-top: 20px;
              h1{
                width: 250px;
                height: 23px;
                color: #e69800;
              }
              h4{
                width: 250px;
                height: 40px;
                font-size: 14px;
                color: #fff;
                margin-top: 20px;
              }
              .one{
                width: 250px;
                height: 30px;
                font-size: 14px;
                color: #fff;
              }
              .two{
                width: 250px;
                height: 20px;
                margin-top: 40px;
                font-size: 14px;
                color: #fff;
              }
              .three{
                width: 250px;
                height: 20px;
                margin-top: 20px;
                font-size: 14px;
                color: #fff;
              }
            }
          }
          
        }
      }
      .mass{
        width: 100%;
        height: 1230px;
        background: url(https://game.gtimg.cn/images/pubg/cp/a20171127apply/xbyy_bg4.jpg) no-repeat;
        margin-top: 2000px;
        position: absolute;
        .mass-person{
          width: 1200px;
          height: 170px;
          font-size: 24px;
          color: #7a7c7f;
          margin-top: 160px;
          position: absolute;
          margin-left: 550px;
          text-align: center;
          span{
            width: 1200px;
            height: 120px;
            font-size: 120px;
            color: #e29603;
          }
        }
        .car-news{
          width: 387px;
          height: 670px;
          background: url(https://game.gtimg.cn/images/pubg/cp/a20171127apply/carimg.png) no-repeat;
          margin-top: 380px;
          margin-left: 950px;
          position: relative;
          ul{
            width: 220px;
            height: 160px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-top: 270px;
            margin-left: 84px;
            position: absolute;
            flex-wrap: wrap;
            li{
              width: 65px;
              height: 65px;
              background: #6f7072;
              list-style: none;
              margin: 5px;
              &:nth-child(1){
                background: #e69800;
              }
            }
          }
        }
        .invite{
          width: 460px;
          height: 165px;
          background: url(https://game.gtimg.cn/images/pubg/cp/a20171127apply/yqhysc.png) no-repeat;
          margin-left: 850px;
          margin-top: -10px;
        }
      }
      .activity{
        width: 100%;
        height: 417px;
        background: url(https://game.gtimg.cn/images/pubg/cp/a20171127apply/xbyy_bg5.jpg) no-repeat;
        position: absolute;
        margin-top: 3230px;
        ul{
          width: 1200px;
          height: 148px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-wrap: wrap;
          margin-left: 550px;
          margin-top: 220px;
          li{
          width: 1069px;
          height: 22px;
          list-style: none;
          position: relative;
          .f1{
            width: 22px;
            height: 22px;
            background: url(https://game.gtimg.cn/images/pubg/cp/a20171127apply/p3_bg7_gz_k.png) no-repeat;
            font-size: 14px;
            color: #fff;
            text-align: center;
          }
          .gx-txt{
            width: 900px;
            height: 20px;
            position: absolute;
            margin-left: 30px;
            margin-top: -20px;
            font-size: 16px;
            color: #2E2E2E;
          }
          }
        }
      }
    }
    .gfooter{
      width: 100%;
      height: 260px;
      background: #000;
      position: absolute;
      top: 4650px;
      .gfooter-left{
        width: 276px;
        height: 86px;
        margin-left: 450px;
        margin-top: 100px;
        .leftone{
          width: 180px;
          height: 35px;
        }
        .lefttwo{
          width: 66px;
          height: 56px;
        }
      }
      .gfooter-right{
        width: 829px;
        height: 130px;
        margin-left: 750px;
        margin-top: -150px;
        ul,
        li{
          font-size: 14px;
          color: #676767;
          list-style: none;
          margin: 5px;
          a{
            color: #676767;
            &:hover{
              text-decoration: underline;
            }
          }
        }
      }
    }
    .return{
      width: 70px;
      height: 70px;
      background: url(https://game.gtimg.cn/images/pubg/cp/a20171127apply/gotop.png) no-repeat;
    }
  }

  /deep/ .ivu-tabs-nav .ivu-tabs-tab-active {
    font-size: 24px;
    color: #e69800;

    &:hover {
      cursor: pointer;
      color: #e69800;
      transition: color .5s;
    }
  }

  /deep/ .ivu-tabs-nav {
    width: 1500px;
    height: 60px;
    font-size: 24px;
    color: #fff;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
  }

  /deep/ .ivu-tabs-ink-bar {
    left: 380px;
    height: 5px;
    background: none;
    position: absolute;
  }

  /deep/ .ivu-tabs-nav .ivu-tabs-tab {
    &:hover {
      cursor: pointer;
      color: #e69800;
      transition: color .5s;
    }
  }
</style>
